<template>
  <div class="info">
    <logo></logo>
    <!-- tab板块 -->
    <van-tabs
      v-model="active"
      swipeable
      animated
      @click="handlerClickTab2"
    >
      <van-tab title="操作记录">
        <div class="tab1-title">
          <ul class="flex">
            <li>标题</li>
            <li>操作员</li>
            <li>时间</li>
          </ul>
        </div>
        <div id="demo1">暂无数据</div>
      </van-tab>
      <van-tab title="任务">
        <div>
          <!-- <ul
            v-for="item in tasklist"
            :key="item.MissionId"
          >
            <li class="flex">
              <p>{{item.RecordCount}}</p>
              <p>{{item.Title}}</p>
            </li>
            <li class="flex">
              <p>{{item.EmergencyLevelName}}</p>
              <p>{{item.ImplementStatusName}}</p>
              <p>{{item.RequireCompleteTimeStr}}</p>
            </li>
          </ul> -->

          <table class="table table-bordered table-hover">
            <tbody
              class="mt-3"
              v-for="item in tasklist"
              :key="item.MissionId"
            >
              <tr>
                <td>{{item.RecordCount}}</td>
                <td
                  colspan="2"
                  style="text-align: left"
                >
                  {{item.Title}}
                </td>
              </tr>
              <tr>
                <td>{{item.EmergencyLevelName}}</td>
                <td>{{item.ImplementStatusName}}</td>
                <td>{{item.RequireCompleteTimeStr}}</td>
              </tr>
            </tbody>
          </table>
        </div>
      </van-tab>
      <van-tab title="设备异常">
        <div class="tab1-title tab2-title">
          <ul class="flex">
            <li>描述</li>
            <li>时间</li>
            <li>状态</li>
          </ul>
        </div>
        <div id="demo2">暂无数据</div>
      </van-tab>
    </van-tabs>
    <tabbar></tabbar>
  </div>
</template>




<script>
import tabbar from '@/components/Tabbar.vue'
import logo from '@/components/Logo.vue'
// 导入通信js
var signalR = require('@/assets/js/signalr.js')
export default {
  name: 'info',
  components: {
    logo,
    tabbar
  },

  data() {
    return {
      active: 0,
      tasklist: []
    }
  },
  created() {
    // this.communication()
  },
  methods: {
    communication() {
      var connection = new signalR.HubConnectionBuilder().withUrl('http://120.79.190.214:121/chat').build()
      // 操作记录  ---》任务  是单独在接口发起的
      connection.on('GetOperationalLog', function(data) {
        console.log(data)
        var recordHtml = ''
        $.each(data, function(index, item) {
          if (index <= 11) {
            recordHtml += ' <table class="table table-bordered mb-0">'
            recordHtml += '     <tbody>'
            recordHtml += '         <tr>'
            recordHtml += '             <th scope="row" style="width:40%">' + item.title + '</th>'
            recordHtml += '             <td style="width:30%">' + (item.createUserName == null ? '自动' : item.createUserName) + '</td>'
            recordHtml += '             <td style="width:60%">' + item.createTimeString + '</td>'
            recordHtml += '         </tr>'
            recordHtml += '     </tbody>'
            recordHtml += ' </table>'
          }
        })
        $('#demo1').html(recordHtml)
      })

      // 这个是设备异常
      connection.on('GetWarnningRecord', function(data) {
        var missionListHtml = ''
        if (data != null && data.length > 0) {
          for (var i = 0; i < data.length; i++) {
            missionListHtml += '<table class="table table-bordered mb-0">'
            missionListHtml += '<tbody>'
            missionListHtml += '<tr>'
            missionListHtml += '<th scope="row" style="width:100px">' + data[i].remarks + '</th>'
            missionListHtml += '<td style="width:50%">' + data[i].createdTimeString + '</td>'
            missionListHtml += '<td style="width:25%">' + (data[i].status ? '已处理' : '待处理') + '</td>'
            missionListHtml += '</tr>'
            missionListHtml += '</tbody>'
            missionListHtml += '</table>'
          }
          $('#demo2').html(missionListHtml)
        }
      })

      // 这个是发起请求
      connection.start().then(function() {
        connection.invoke('Send', '')

        event.preventDefault()
      })
    },
    async handlerClickTab2(name) {
      console.log(name)
      if (name === 1) {
        const { data: res } = await this.$http.post(`Mission/GetMissionList`, {
          Sort: 'desc',
          TypeName: '种植',
          limit: 3,
          page: 1,
          sidx: 'M.CreateTime',
          ImplementStatus: -1,
          ReceiveUser: '00000000-0000-0000-0000-000000000000',
          SendUser: '00000000-0000-0000-0000-000000000000',
          AreaId: '622ad4a7-fc01-4ff8-8069-3e591b120773',
          type: 1
        })
        console.log(res.data)
        this.tasklist = res.data
      }
    }
  }
}
</script>

<style lang="less" scoped>
#demo1 {
  box-sizing: border-box;
}
.tab1-title {
  ul {
    padding-left: 4rem;
    font-size: 14px;
    font-weight: bold;
    margin-top: 1rem;
    li:nth-child(1) {
      padding-left: 1rem;
    }
    li:nth-child(2) {
      padding-left: 5rem;
    }
    li:nth-child(3) {
      padding-left: 5.5rem;
    }
  }
}
.tab2-title {
  li:nth-child(1) {
    padding-left: 0rem !important;
  }
  li:nth-child(2) {
    padding-left: 5.5rem !important;
  }
  li:nth-child(3) {
    padding-left: 7.5rem !important;
  }
}

.table-bordered {
  border: 1px solid #d4d4d4;
  border-collapse: collapse;
  border-collapse: collapse;
  width: 96%;
  box-sizing: border-box;
  border-spacing: 0;
  margin: 10px auto;
  td {
    border: 1px solid #d4d4d4;
    padding: 5px;
    font-size: 0.8rem;
  }
}
</style>